<template>
    <div class="video-child-module">
        <div class="video-child-module-title">
            <div style="float:left">
                <div style="line-height:55px;">
                    <span style="color:#212121;font-size:20px;">{{fanjuXinxi}}</span>
                </div>
            </div>
            <div style="float:right;margin-right:10px;line-height:55px;">
                <a href="">
                    <span style="color:#fd4c5d;font-size:14px;">
                        更多<i class="el-icon-arrow-right"></i>
                    </span>
                </a>
            </div>
        </div>

<!--        <div class="video-child-module-1">-->
<!--            <div class="report-second-child-3">-->
<!--                <showHoverMaskWithOutCharPlus v-if="res.length>0" :video-info="res[0]"></showHoverMaskWithOutCharPlus>-->
<!--            </div>-->
<!--            <div class="report-second-child-3">-->
<!--                <div class="report-second-child-4">-->
<!--                    <showHoverMaskWithOutCharacters  v-if="res.length>1" :video-info="res[1]"></showHoverMaskWithOutCharacters>-->
<!--                </div>-->
<!--                <div class="report-second-child-4">-->
<!--                    <showHoverMaskWithOutCharacters v-if="res.length>2" :video-info="res[2]"></showHoverMaskWithOutCharacters>-->
<!--                </div>-->
<!--                <div class="report-second-child-4">-->
<!--                    <showHoverMaskWithOutCharacters v-if="res.length>3" :video-info="res[3]"></showHoverMaskWithOutCharacters>-->
<!--                </div>-->
<!--                <div class="report-second-child-4">-->
<!--                    <showHoverMaskWithOutCharacters v-if="res.length>4" :video-info="res[4]"></showHoverMaskWithOutCharacters>-->
<!--                </div>-->
<!--            </div>-->
<!--        </div>-->
        <div class="video-child-module-1">
            <div class="video-child-module-2">
                <showHoverMaskWithOutCharacters v-if="res.length>5" :video-info="res[0]"></showHoverMaskWithOutCharacters>
            </div>
            <div class="video-child-module-2">
                <showHoverMaskWithOutCharacters v-if="res.length>6" :video-info="res[1]"></showHoverMaskWithOutCharacters>
            </div>
            <div class="video-child-module-2">
                <showHoverMaskWithOutCharacters v-if="res.length>7" :video-info="res[2]"></showHoverMaskWithOutCharacters>
            </div>
            <div class="video-child-module-2">
                <showHoverMaskWithOutCharacters v-if="res.length>8" :video-info="res[3]"></showHoverMaskWithOutCharacters>
            </div>
        </div>

        <div class="video-child-module-1">
            <div class="video-child-module-2">
                <showHoverMaskWithOutCharacters v-if="res.length>5" :video-info="res[4]"></showHoverMaskWithOutCharacters>
            </div>
            <div class="video-child-module-2">
                <showHoverMaskWithOutCharacters v-if="res.length>6" :video-info="res[5]"></showHoverMaskWithOutCharacters>
            </div>
            <div class="video-child-module-2">
                <showHoverMaskWithOutCharacters v-if="res.length>7" :video-info="res[6]"></showHoverMaskWithOutCharacters>
            </div>
            <div class="video-child-module-2">
                <showHoverMaskWithOutCharacters v-if="res.length>8" :video-info="res[7]"></showHoverMaskWithOutCharacters>
            </div>
        </div>

        <div class="video-child-module-1">
            <div class="video-child-module-2">
                <showHoverMaskWithOutCharacters v-if="res.length>5" :video-info="res[8]"></showHoverMaskWithOutCharacters>
            </div>
            <div class="video-child-module-2">
                <showHoverMaskWithOutCharacters v-if="res.length>6" :video-info="res[7]"></showHoverMaskWithOutCharacters>
            </div>
            <div class="video-child-module-2">
                <showHoverMaskWithOutCharacters v-if="res.length>7" :video-info="res[6]"></showHoverMaskWithOutCharacters>
            </div>
            <div class="video-child-module-2">
                <showHoverMaskWithOutCharacters v-if="res.length>8" :video-info="res[5]"></showHoverMaskWithOutCharacters>
            </div>
        </div>
    </div>
</template>

<script>
    import showHoverMaskWithOutCharacters from "@/components/showHoverMaskWithOutCharacters";

    export default {
        components:{showHoverMaskWithOutCharacters},
        name: 'videoGrandChildModule',
        props: {
            reportIndex: {   // 可选字段，有默认值
                type: Number
            }
        },
        data () {
            return {
                paigangbangForm:{
                    fenquParent:''
                },
                res:[],
                fanjuXinxi:''
            }
        },
        mounted(){
            var self = this;
            self.paigangbangForm.fenquParent = "01-fanju";
            self.fanjuXinxi = '番剧信息';
            //查找动漫区前11的视频
            self.$api.post('paihangbang/getPaihangbangTop9',self.paigangbangForm, result => {
                self.res = result;
            });
        }
    }
</script>

<style scoped>
    .video-child-module{
        width:670px;
        height:550px;
    }

    .video-child-module-title{
        height:60px;
        width:664px;
    }

    .video-child-module-1{
        width:668px;
        height:150px;
    }

    /*.report-second-child-2{*/
    /*    width:668px;*/
    /*    height:150px;*/
    /*}*/

    /*.report-second-child-3{*/
    /*    width:334px;*/
    /*    height:320px;*/
    /*    float:left;*/
    /*}*/

    .video-child-module-2{
        width:167px;
        min-height:150px;
        float:left;
        /*background-color:blue;*/
    }
    /*.import-href{*/
    /*    color:#333333;*/
    /*    font-size:14px;*/
    /*    margin-right:50px;*/
    /*    cursor: pointer;*/
    /*}*/

    /*.import-href:hover{*/
    /*    color:#fd4c5a;*/
    /*}*/

</style>
